<!-- Created by 梁棋 on 2024/1/31 -->
<template>
  <el-select
    v-bind="$attrs"
    v-model="selectVal"
    clearable
    style="width:100%;"
    v-on="$listeners"
    @change="selectChange">
    <el-option
      v-for="item in selectOption"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
<script>
export default {
  name: 'SelectList',
  props: {
    // 是否需要查询字典
    isHasDict: {
      type: Boolean,
      default: true
    },
    // 不需要查询字典时传递的选择列表
    defaultOption: {
      type: Array,
      default: () => []
    },
    // 当前值
    value: {
      type: [Number, String, Array],
      default: '',
      required: true
    },
    // 字典名称-用于在码表查询
    optionName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dictOption: []
    };
  },
  computed: {
    selectVal: {
      set(val) {
        // 通过.sync修饰符传值可以使用
        // this.$emit('update:value', val)
        // 通过v-model传值需要触发默认的input事件
        this.$emit('input', val);
      },
      get() {
        return this.value;
      }
    },
    selectOption() {
      return this.isHasDict ? this.dictOption : this.defaultOption;
    }
  },
  methods: {
    selectChange(val) {
      const currentItem = this.selectOption.find(item => item.value === val);
      this.$emit('callback', currentItem);
    }
  }
};
</script>

<style scoped lang="scss">
</style>
